<template>
  <div class="video-ProductLibrary">
    <div class="video-ProductLibrary-left empty-library">暂无数据</div>
    <!--<div class="video-ProductLibrary-left">
      <el-scrollbar class="elscrollbar">
        <div class="video-model" v-for="(item,index) in State.VueAliplayerArr" :key="index" :class="SelectedIndex === index ? 'video-ProductLibrarylistactive' : ''"
          @click="GetClickProduc(index)">
            <div class="video-model-ProductName" :class="SelectedIndex == index ? 'video-fontcolor' : ''">
                <span>{{item.ProductName}}</span>
            </div>
            <div class="video-model-ProductType" :class="SelectedIndex == index ? 'video-fontcolor' : ''">
                <span>{{item.ProductType}}</span>
            </div>
            <div class="video-model-ProductCode" :class="SelectedIndex == index ? 'video-fontcolor' : ''">
                <span>{{item.ProductCode}}</span>
            </div>
            <div class="video-model-ProductImg">
              <div>
                <img :src="item.ProductImg">
              </div>
            </div>
        </div>
        <div class="div-empty" v-if="State.VueAliplayerArr.length%3===1"></div>
        <div class="div-empty" v-if="State.VueAliplayerArr.length%3===1"></div>
        <div class="div-empty" v-if="State.VueAliplayerArr.length%3===2"></div>
      </el-scrollbar>
    </div>-->
    <div class="video-ProductLibrary-rigth empty-library">暂无数据</div>
    <!--<div class="video-ProductLibrary-rigth">
      <div class="video-model-right-ProductName">
        <span>{{State.VueAliplayerArr[SelectedIndex].ProductName}}</span>
      </div>
      <div class="video-model-right-ProductType">
        <span>{{State.VueAliplayerArr[SelectedIndex].ProductType}}</span>
      </div>
      <div class="video-model-right-video">
        <div>
          <VueAliplayer v-bind:playauth="State.playauth" :vid='State.VidArr[SelectedListIndex]' ref="VueAliplayer"></VueAliplayer>
        </div>
      </div>
      <div class="video-model-right-introduction-panel">
        <div></div>
        <div>
          <span>产品简介</span>
        </div>
      </div>
      <div class="video-model-right-content">
        <span>{{State.VueAliplayerArr[SelectedIndex].ProductExplain}}</span>
      </div>
      <div class="video-model-right-introduction-count">
        <div></div>
        <div>
          <span>视频个数</span>
        </div>
      </div>
      <div class="video-model-right-number">
        <span>16</span>
      </div>
      <div class="video-model-right-List">
        <el-scrollbar class="elscrollbar">
          <div class="right-List-model" v-for="(item,index) in State.VideoName" :key="index" 
          :class="SelectedListIndex == index ? 'ProductLibraryVideoactive' : ''"
          @click="GetVideoList(index)"
          >
            <span>{{item.name}}</span>
          </div>
        </el-scrollbar>
      </div>
    </div>-->
  </div>
</template>

<script>
import { defineComponent, reactive, ref,toRef, toRefs,onMounted,nextTick } from "vue";
import { postData} from "@/assets/js/pubilcs.js";
import VueAliplayer from "@/components/TeachingResources/VueAliplayer.vue";
export default defineComponent({
  name: "VideoPlayers",
  components: {
    VueAliplayer
  },
  setup() {
    //选中的产品index
    let SelectedIndex=ref(0)
    //选中集数的index
    let SelectedListIndex=ref(0)
    //组件的ref
    let VueAliplayer=ref('')
    let State = reactive({
      VueAliplayerArr:[
        {
          ProductName: "新能源汽车",
          ProductType: "高压组件更换与维护技能视频",
          ProductCode: "吉利帝豪EV450",
          ProductImg: require("@/assets/img/res/吉利帝豪EV450.png"),
          ProductExplain:
            "本技能视频是由参赛一线指导教师指导拍摄，严格按照国家新能源汽车技能大赛项目流程拍摄，将比赛流程分解为若干实训模块，分步讲解.",
        },
      ],
      VideoName:
      [
        {name:"1.作业准备-安全防护与外检作业"},
        {name:"2.安全防护,前舱附件,制动系统,电机（电池）冷却系统的检查"},
        {name:"3.暖风水加热系统,冷却系统,高压组件,充电系统的检查"},
        {name:"4.低压电源系统,转向系统,仪表板,空调系统,动力电池数据流的检查"},
        {name:"5.检查灯光系统,高压管理系统,故障码和标准断电"},
        {name:"6.散热器,冷凝器,传动系统,前后悬架,制动系统的检查"},
        {name:"7.动力电池系统检查与紧固,动力总成系统的检查"},
        {name:"8.减速器油液和电机（电池）冷却液的更换"},
        {name:"9.高压线束烧蚀,绝缘性状态的检查"},
        {name:"10.高压线束及高压组件状态"},
        {name:"11.车载充电机的拆卸及输入端输出端绝缘性的检测"},
        {name:"12.电机三相线束的检测"},
        {name:"13.安装高压部件"},
        {name:"14.冷却液的加注和排气及漏液情况的检查"},
        {name:"15.竣工检验及整理作业"},
      ],
      VidArr:[
        'a61ffa630bd64e70906546ea4973f3bb',
        '9c490e8532684bb79b12888731da25b1',
        '0beac47eaea849c8ae881f19b682d447',
        '496b1ab7450243f891a7349f277407ac',
        'c60732ce5e114f1aa1272921ff73150a',
        '348f03cc12c84f229b266de6a7936937',
        '80286d6de5b443fe8a20abcd12252d11',
        '05b8f5abb42b4c829e62a834ede276fd',
        'fcc0275540a34d5282dbb58e5abe0edb',
        '810225d6307a4b24b8238a0abc3c5bf4',
        '5962b4e701da4727b4ba04fab3ef707a',
        '45cbe21b733c4869886adde1c9908ca1',
        'a3feb1b81e1e47bbad1fbbbb6744b929',
        'd5b31a75080a43fd9d1b7c495e69f50d',
        '01369173bdcd422b98b221ba49060377',
      ],
      //播放验证码
      playauth:''
    })
    //获取点击的产品改变样式
    function GetClickProduc(index){
      SelectedIndex.value=index
    }
    //获取视频的播放集数
    function GetVideoList(index){
      SelectedListIndex.value=index
      postData("/api/AlyServer/GetVideoPlayAuth",JSON.stringify({vid:State.VidArr[index]})).
      then(function (res) {
        console.log(res)
        if(res.success){
          State.playauth =res.result.result
        }
      })
      .catch((error) => {

      });
      nextTick(() => {
        //VueAliplayer.value.initAliplayer()
      })
    }
    //初始化数据
    function InitVideoData(){

    }
    onMounted(async() => {
      GetVideoList(0)
    });
    return {
      State,
      SelectedIndex,
      SelectedListIndex,
      GetClickProduc,
      GetVideoList,
      VueAliplayer
    };
  },
});
</script>
<style lang="less">
.video-ProductLibrary {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.empty-library{
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-ProductLibrary-left{
  position: absolute;
  left: 160px;
  top: 100px;
  width: 1140px;
  height: calc(100% - 110px);
  background: #ffffff;
  border-radius: 10px;
}
.video-ProductLibrary-left .el-scrollbar__view {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.video-ProductLibrary-left .elscrollbar {
  position: absolute;
  width: 100%;
  height: 98%;
}
.video-ProductLibrary-left .el-scrollbar__wrap {
  overflow-x: hidden;
}
.video-ProductLibrary-left .video-model{
  margin-top: 30px;
  width: 320px;
  height: 320px;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.2);
  border-radius: 20px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  text-align: center;
}
.div-empty{
  width: 320px;
}
.video-model-ProductName{
  margin-top: 10px;
  width: 100%;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(0deg, #807de1 0%, #218cde 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-model-ProductType{
  width: 100%;
  height: 30px;
  margin-top: 10px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-model-ProductCode{
  width: 100%;
  height: 30px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-model-ProductImg{
  margin-top: 10px;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-model-ProductImg>div{
  width: 80%;
  height: 140px;
}
.video-model-ProductImg>div img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.video-ProductLibrary-left .video-ProductLibrarylistactive{
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
  border-radius: 20px;
}
.video-ProductLibrary-left .video-fontcolor{
  background: #ffffff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.video-ProductLibrary-rigth{
  position: absolute;
  right: 38px;
  top: 100px;
  width: 540px;
  height: calc(100% - 110px);
  background: #ffffff;
  border-radius: 10px;
}
.video-model-right-ProductName{
  margin-left: 40px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 30px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1b1b1d;
  line-height: 56px;
}
.video-model-right-ProductType{
  margin-left: 40px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 18px;
  font-family: PingFang SC;
  color: #81859c;
}
.video-model-right-video{
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-model-right-introduction-panel,.video-model-right-introduction-count{
  margin-top: 10px;
  margin-left: 40px;
  width: 80%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-model-right-introduction-panel>div:nth-child(1),
.video-model-right-introduction-count>div:nth-child(1){
  width: 4px;
  height: 14px;
  background: linear-gradient(0deg, #807de1, #218cde);
}
.video-model-right-introduction-panel>div:nth-child(2),
.video-model-right-introduction-count>div:nth-child(2){
  margin-left: 20px;
  display: flex;
  align-self: flex-start;
  width: 440px;
  height: 40px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #81859c;
  line-height: 56px;
  line-height: 40px;
}
.video-model-right-content{
  margin-left: 40px;
  width: 85%;
  min-height: 60px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1b1b1d;
  text-align: left;
  text-indent: 20PX;
}
.video-model-right-number{
  margin-top: 10px;
  margin-left: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  font-size: 16px;
  font-family: Arial;
  font-weight: 400;
  color: #1b1b1d;
  line-height: 24px;
}
.video-model-right-List{
  margin-left: 40px;
  margin-top: 20px;
  width: 85%;
  height: calc(100% - 640px);
}
.video-model-right-List .el-scrollbar__view {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.video-model-right-List .elscrollbar {
  position: absolute;
  width: 85%;
  height: calc(100% - 640px);
}
.video-model-right-List .el-scrollbar__wrap {
  overflow-x: hidden;
}
.video-model-right-List .right-List-model{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
  text-indent: 20PX;
  width: 95%;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
}
.ProductLibraryVideoactive{
  color: #fff;
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
  box-shadow: 0px 10px 80px 0px rgba(129, 133, 156, 0.25);
}
</style>
